<!DOCTYPE html>
<html>

<head>
    <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>


</head>

<body background="4.jpg">
<a href="index2.jsp" style="margin-top: 800px" ><h4>返回</h4></a>
<div id="main" style="width: 800px; height: 400px"></div>


<script type="text/javascript">
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '各学期男女总人数',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['男', '女'],
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
        calculable: true,
        xAxis: [
            {
                type: 'value',
                boundaryGap: [0, 0.01],
            },
        ],
        yAxis: [
            {
                type: 'category',
                data: ['第一学期', '第二学期', '第三学期', '第四学期',
                '第五学期','第六学期','第七学期','第八学期'],
            },
        ],
        series: [
            {
                name: '男',
                type: 'bar',
                data: [200, 210, 203, 159,170,248,180,280],
            },
            {
                name: '女',
                type: 'bar',
                data: [300, 290, 230, 257,310,280,301,310],
            },
        ],
    };

    myChart.setOption(option);


</script>
</body>

</html>